<template>
	<view class="groupMain">
		<view class="groupInfo">
			<view class="groupInfo_title">
				<view class="groupphoto">
					<image class="photoimg" :src="groupInfo.groupPicPath || '/static/1.jpg'" alt="" mode=""></image>
				</view>
				<view class="namearea">
					<view class="">
						<text class="groupname">{{ groupInfo.groupName }}</text>
					</view>
					<view>
						<text class="signature">{{ groupInfo.signature }}</text>
					</view>
				</view>
			</view>
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
				<swiper-item>
					<view class="swiper-item">
						<image style="width: 250rpx; height: 130rpx" src="/static/1.jpg" mode=""></image>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="swiper-item">
						<image style="width: 300rpx; height: 150rpx" src="/static/1.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="closeicon" @click="openGroupInfo">
				<uni-icons type="close" size="24"></uni-icons>
			</view>
			<view class="ownarea" v-if="Object.keys(own).length>0">
				<view class="ownpic">
					<image class="ownpic" :src="own.photo" mode=""></image>
				</view>
				<view class="">
					<text style="font-size: 32rpx; font-weight: 500">{{own.name }}</text>
					<text style="font-size: 24rpx; flex-wrap: inherit">{{own.signature }}</text>
				</view>
			</view>
			<view class="btngroup">
				<view class="btnview">
					<image class="btnimg" src="/static/businessIcon/home.png" alt="" mode=""></image>
				</view>
				<view class="btnview">
					<image class="btnimg" src="/static/love.png" alt="" mode=""></image>
				</view>
				<view class="btnview">
					<image class="btnimg" src="/static/fivestar.png" @click="handleChat"  alt="" mode=""></image>
				</view>
				<view class="btnview">
					<image class="btnimg" src="/static/tele.png" alt="" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'groupInfo',
	props: {
		groupInfo: {
			type: Object,
			required: true
		},
		own:{
			type:Object,
			default:()=>{}
		}
	},
	mounted() {
		},
	data() {
		return {};
	},
	methods:{
		handleChat(){
			uni.navigateTo({
				url:'/pages/groupChat/groupChat'
			})
		},
		openGroupInfo(){
			this.$emit('openGroupInfo')
		}
		
	}
	
};
</script>
<style lang="scss" scoped>
.groupMain {
	position: fixed;
	top: 200rpx;
	left: 0;
	width: 750rpx;
	padding-left: 25rpx;
	padding-right: 25rpx;
	box-shadow: 0 4rpx 8rpx rgba(51, 51, 51, 0.3);
}
.namearea {
	height: 96rpx;
}

.groupInfo {
	flex-direction: column;

	width: 700rpx;
	height: 400rpx;
	padding: 12rpx;
	border-radius: 24rpx;
	background-color: #ffffff;
}
.groupInfo_title {
	display: flex;
	flex-direction: row;
}

.groupphoto {
	width: 96rpx;
	height: 96rpx;
	margin-right: 24rpx;
	border-radius: 16rpx;
	background-color: #666666;
	overflow: hidden;
}

.groupname {
	display: flex;
	background-color: red;
	flex-direction: row;
	align-items: flex-start;
	font-size: 32rpx;
	font-weight: 700;
	color: #333333;
	lines: 1;
	text-overflow: ellipsis;
}

.signature {
	font-size: 26rpx;
	color: #666666;
	lines: 2;
	text-overflow: ellipsis;
	margin-top: 16rpx;
}

.btngroup {
	position: absolute;
	right: 20rpx;
	bottom: 0;
	flex-direction: row;
	align-items: center;
}

.btnview {
	width: 92rpx;
	height: 92rpx;
	align-items: center;
	justify-content: center;
	border-radius: 46rpx;
	margin: 5rpx;
	background-color: rgba(0, 0, 0, 0.3);
	margin-bottom: 32rpx;
}

.closeicon {
	position: absolute;
	right: 0rpx;
	top: 0rpx;
}
.btnimg {
	width: 76rpx;

	height: 76rpx;
	border-radius: 38rpx;
}
.ownarea {
	position: absolute;

	align-items: center;
	left: 22rpx;
	bottom: 22rpx;
	width: 230rpx;
	height: 120rpx;
	display: flex;
	flex-direction: row;
}
.ownpic {
	width: 100rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background-color: #333333;
}
.swiper{
		display: flex;
	background-color: #333333;
		align-items: center;
	justify-content: center;
	margin: 15rpx;
}
.swiper-item{


	width: 750rpx;
	height: 135rpx;
}
</style>
